<template>
  <view>
    <view class="cu-bar bg-white margin-top-xs" v-if="adminInfo">
      <text class="txt-shxx">区域合伙人信息</text>
    </view>

    <view class="ywy" v-if="adminInfo">
      <view class="flex">
        <view>
          <image :src="adminInfo.url" class="tx" />
        </view>
        <view class="flex-treble xm">
          <view><font class="vname">姓名:</font>{{adminInfo.name}}</view>
          <view class="sjhm"><font>手机号码:</font>{{adminInfo.phone}}</view>
        </view>
      </view>
      <view class="grjs">
        <font> 个人介绍:{{adminInfo.remark||'这个人很懒，什么都没留下~'}}</font>
      </view>
    </view>

    <view class="cu-bar bg-white margin-top-xs">
      <text class="txt-shxx">商户信息</text>
    </view>
    <view class="margin-custom">
      <view class="cu-form-group">
        <view class="vlabel"><b class="sx"></b><font
            class="vname">归属用户:</font>{{ shopInfo.adminName||'' }}
        </view>
      </view>
      <view class="cu-form-group">
        <view class="vlabel"><b class="sx"></b><font
            class="vname">名称:</font>{{ shopInfo.poiName||'' }}
        </view>
      </view>
      <view class="cu-form-group">
        <view class="vlabel"><b class="sx"></b><font
            class="vname">地址:</font>{{ shopInfo.address }}
        </view>
      </view>
      <view class="cu-form-group">
        <view class="vlabel"><b class="sx"></b><font
            class="vname">经纬度:</font>{{ shopInfo.latitude }},{{shopInfo.longitude}}
        </view>
      </view>

      <view class="cu-form-group">
        <view class="vlabel"><b class="sx"></b><font
            class="vname">审核状态:</font>
          <span class="text-orange">
            {{ shopInfo.examineVerifyName }}
          </span>
        </view>
      </view>
      <view class="cu-form-group">
        <view class="vlabel"><b class="sx"></b><font
            class="vname">来源:</font>{{ shopInfo.shopSourceName }}
        </view>
      </view>
      <view class="cu-form-group">
        <view class="vlabel"><b class="sx"></b><font
            class="vname">入驻时间:</font>{{ shopInfo.createTime }}
        </view>
      </view>
    </view>
    <view class="cu-bar bg-white margin-top-xs" v-if="orders">
      <text class="txt-shxx">订单信息（{{orders.length||0}}）</text>
    </view>
<!--    <view class="bg-white nav text-left">-->
<!--      <view class="cu-item" :class="item2.idx==tabIndex?'text-orange cur':''" @tap="tabSelect(item2.idx)" v-for="(item2,idx) in tabs" >-->
<!--        {{item2.name}}({{item2.number}})-->
<!--      </view>-->
<!--    </view>-->
    <view class="cu-list menu-avatar" v-if="orders && tabIndex == '1'">
      <order-one-list  v-for="(item,idx) in orders" :order="item"></order-one-list>
    </view>
    <view class="cu-list menu-avatar" v-if="orders2 && tabIndex == '0'">
      <order-one-list  v-for="(item,idx) in orders2" :order="item"></order-one-list>
    </view>
  </view>
</template>

<script setup lang="ts">
import {onLoad} from '@dcloudio/uni-app'
import {ref, onMounted, computed, reactive} from 'vue';
import {getShopInfo} from '../../common/api/shop'
import OrderOneList from "../../components/OrderOneList.vue";

const shopInfo = ref({})
const adminInfo = ref({})
const orders = ref([])
const orders2 = ref([])
const id = ref(0)
const tabIndex = ref(1)
const tabSelect = (index) => {
  tabIndex.value = index;
}
const tabs = ref([
  {name: '全部订单', idx: 1, number: 0},
  {name: '核销订单', idx: 0, number: 0}
])

const formatDateTime = (date, format) => {
  try {
    const o = {
      'M+': date.getMonth() + 1, // 月份
      'd+': date.getDate(), // 日
      'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
      'H+': date.getHours(), // 小时
      'm+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
      'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
      S: date.getMilliseconds(), // 毫秒
      a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
      A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
    };

    if (/(y+)/.test(format)) {
      format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (let k in o) {
      if (new RegExp('(' + k + ')').test(format)) {
        format = format.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
        );
      }
    }
  } catch (e) {

  }
  return format;
}

onLoad(option => {
  id.value = option.id
})
onMounted(() => {
  if (id.value) {
    getShopInfo(id.value).then(res => {
      shopInfo.value = res.data.shop
      adminInfo.value = res.data.admin
      orders.value = res.data.orders
      if (res.data.orders) {
        res.data.orders.forEach(item=>{
          if (item.orderStatus == '1') {
            orders2.value.push(item)
          }
        })
      }
      tabs.value.forEach(item=>{
        if(item.idx == '1') {
          item.number = orders.value.length
        } else {
          item.number = orders2.value.length
        }
      })
    })
  }
})
</script>

<style lang="scss" scoped>
.ywy{
  margin-left: 20rpx;
  .tx{
    width: 120rpx;
    height: 120rpx;
  }
  .xm{
    margin-left: 20rpx;
    .vname{
      font-size: 32rpx;
      color: #1D1D1D;
    }
    .sjhm{
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #878787;
    }
  }
  .grjs {
    font-size: 26rpx;
    color: #878787;
  }
}
.sx{
  width: 6rpx;
  height: 24rpx;
  background: #EAB769;
  display: inline-block;
  margin-right: 16rpx;
}
.txt-shxx{
  font-weight: bold;
  font-size: 34rpx;
  color: #1A1A1A;
  margin-left: 20rpx;
}
.vlabel{
  font-size: 28rpx;
  color: #171717;
}
.margin-custom{
  margin-left: -10rpx;
}
</style>
